<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>开卡提醒</title>
	<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" name="viewport">
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/flexible.css">
	<link rel="stylesheet" href="css/vant.css">
	<link rel="stylesheet" href="css/boss.css">
	<script src="js/vue/vue.js"></script>
	<script src="js/vue/axios.js"></script>
	<script src="js/vue/vant.js"></script>
	<script src="js/vue/MD5.js"></script>
	<script src="js/vue/qs.js"></script>
	<script src="js/fontsize.js"></script>
</head>
<body>
<div id="app">
	<template>
		<div class="rf clearfix selectDay">
			<select v-model="from.day" @change="selectDay">
				<option v-for="item in dayList" :value="item.day">
					小于{{item.day}}天
				</option>
			</select>
		</div>
		<div class="containers clearfix" style="padding-top:.5rem;">
			<div class="KcCancel clearfix" v-for="item in dataList">
				<p>
					<span class="Kc_name">{{item.Username}}</span>
					<span class="canerl_qx canerl_img">
						<a :href="'tel:' + item.Phone"><img style="height:.15rem;" src="images/phoneBd.png"/></a>
					</span>
					<span class="rf color_nn">{{item.Cardname}}</span>
					<span class="rf fontzise12" v-if="item.Cardtype=='10'">期限卡 </span>
					<span class="rf fontzise12" v-else-if="item.Cardtype=='20'">次数卡 </span>
					<span class="rf fontzise12" v-else>储值卡 </span>
				</p>
				<p>
					<span class="canerl_qx">距离 {{item.day}} 天开卡</span>
					<!-- <span class="rf fontzise12">剩余 {{item.Surplus}} {{item.Surplus_c}}</span> -->
				</p>
				<p>
					<span class="color_nS">持卡数 {{item.card_num}}</span>
					<span class="rf fontzise12">到期时间 {{item.Edate}}</span>
				</p>
			</div>
		</div>
	</template>
	<van-list
		v-model="loading"
		:finished="finished"
		finished-text="没有更多了"
		@load="getList"
		>
		<van-cell
			v-for="item in lists"
			:key="item"
			:title="item"
		/>
	</van-list>
</div>
<script>
	var app = new Vue({
		el: '#app',
		data: {
			dataList:[],
			lists:[],
			loading: false,
			finished: false,
			totalnum:'',
			totalpage:'',
			listd:[],
			page:'1',
			dayList:[
				{day:'5'},
				{day:'10'},
				{day:'20'},
				{day:'30'},
				{day:'60'}
			],
			from:{
				day:'5',
				page:''
			}
		},
		methods: {
			getList(){
				const params={
					page:this.from.page,
					day:this.from.day
				}
				axios.get('mobileapi/boss/coordination.php?act=open_time',{params:params}).then(res => {
					let { msg, code} = res.data
					if (code !== 200) {
						vant.Toast('请求发送失败，请重试')
					} else {
						data=res.data
						this.listd=data.data.list
						this.totalnum=data.data.totalnum
						this.from.page=parseInt(data.data.page)+1
						for(let i in this.listd){
							if(this.listd[i].Picurl==""||this.listd[i].Picurl==null){
								this.listd[i].Picurl='images/moren.png'
							}
						}
						for (let i = 0; i < this.listd.length; i++) {
							this.dataList.push(this.listd[i])
						}
						// 加载状态结束
						this.loading = false
						// 数据全部加载完成
						if (this.dataList.length >= this.totalnum) {
							this.finished = true
						}
					}
				}).catch(err => {
					vant.Toast('请求发送失败，请重试')
				})
			},
			selectDay(){
				this.dataList=[]
				this.lists=[]
			    this.listd=[]
				this.from.page='1'
				this.getList()
			}
		}
	})
</script>
</body>
</html>